<template>
<div>
	<el-dialog title="服务列表" :visible.sync="dialogVisible" width="850px" @close="handleClose"
		:close-on-click-modal="false">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>服务列表</span>
		</div>
	<div class=" smp_panel_1">
		<div class="smp_panel_header" >
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">查询条件</div>
		</div>
		
		<!-- <div class="detailsTitle">交易信息</div> -->
		<div class=" smp_panel_body">
		<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="query.body">
			
			<el-row>
						<el-col :span="12">
							<el-form-item label="交易码:" >
								<el-input v-model="query.body.transCode" placeholder="交易码"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="交易名称:" >
								<el-input v-model="query.body.transName" placeholder="交易名称"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="服务系统:" prop="systemNo">
								<el-select v-model="query.body.systemNo" style="width: 100%" filterable remote
									reserve-keyword placeholder="请输入系统编号或名称" :remote-method="getsystems1"
									>
									<el-option v-for="item in systemList1" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										{{ item.systemName }}({{item.systemNo}})
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
					<!-- 	<el-col :span="12">
							<el-form-item label="服务类型:" >
								<el-select v-model="query.body.busType" style="width: 100%"
									placeholder="服务类型" >
									<el-option v-for="item in dict('SMP0003')" :key="item.itemCode" :label="item.itemName"
										:value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
			
					<el-col :span="12" >
						 <el-form-item style="text-align: right;"> 
							<el-button  size="mini" plain type="primary" @click="onSubmit" ><i class="el-icon-search"></i> 查询</el-button>
							<el-button size="mini"  @click="reset" style="text-align: left;"><i class="el-icon-refresh-right"></i> 重置</el-button>
						 </el-form-item> 
					</el-col>
				
			</el-row>
		</el-form>
	</div>
	</div>
	
	<div class=" smp_panel_1">
		<div class="smp_panel_header" >
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">服务列表</div>
		</div>
		
		<!-- <div class="detailsTitle">交易信息</div> -->
		<div class=" smp_panel_body">
		<el-table ref="listTable" :data="list" size="mini" stripe   style="width: 100%">
		<el-table-column type="selection"  label="选择"  align="center"/>
		<el-table-column prop="systemNo" label="服务系统"  align="center"  show-overflow-tooltip="true">
		<template slot-scope="scope">
		{{scope.row.systemNo|getSystemName}}({{scope.row.systemNo}})
		</template>
		</el-table-column>
	        <el-table-column prop="busCode" label="服务编码"  align="center" />
			<el-table-column prop="transName" label="交易名称" show-overflow-tooltip="true"  align="center" />
			<el-table-column prop="transCode" label="交易码"  align="center" />
			<!-- <el-table-column prop="busType" label="服务类型" width="100" align="center" >
				<template slot-scope="scope">
				 	{{scope.row.busType|dictName("SMP0003")}}
				</template>
			</el-table-column> -->
		
			<el-table-column prop="status" label="服务状态"  align="center">
				<template slot-scope="scope">
				 	{{scope.row.status|dictName("SMP0002")}}
				</template>  
			</el-table-column>
			
		
			

			<!-- <el-table-column prop="proposer" label="申请人" width="100" align="center" >
				<template slot-scope="scope">
					{{scope.row.proposer|getUserChinesName}}
				</template>
			</el-table-column> -->
			
			<!-- <el-table-column prop="applicationTime" label="申请时间" width="200" align="center" /> -->
			
			<!-- <el-table-column  label="操作"
			      align="center" width="150">
				<template slot-scope="scope">
				       <el-link 
				         size="mini"
						 type="primary"
						 :underline="false"
						 style="font-size: 12px;"
				         @click="handleEdit(scope.$index, scope.row)">选择</el-link>
				    
				     </template>  
			</el-table-column> -->
			 
		</el-table>
		<div class="smp-pagination" v-show="total>0">
			<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum" @current-change = "currentChange" @size-change="sizeChange">
			</el-pagination>
		</div>
	</div>
	</div> 
	
	
	
	
 	<span slot="footer" class="dialog-footer">
			<el-button size="mini" type="primary" plain @click="onCommit"><i class="el-icon-check"/>确认</el-button>
		<el-button size="mini" plain @click="closeDialog"><i class="el-icon-close"/>取消</el-button> 
		</span> 
	</el-dialog>
</div>
</template>

<script>
	"use strict";
	import {getServiceByPage} from '@/api/service.js';
	import {getSystemCallCheck} from '@/api/demand.js';
	
	export default {
		data() {
			return {
				total:0,
					
					type:'add',
					list: [],
					id:'',
					pubSysCode:'',
					systemNo:'',
					qmsNo:'',
					systemList1: [],
					query: {
						body:{
							id:'',
							pubSysCode:'',
							transCode:'',
							transName:'',
							busType:'',
							status:'',
							proposer:'',
							applyDateBegin:'',
							applyDateEnd:'',
							busCode:'',
							systemNo:''
						},
						pageNum: 1,
						pageSize: 5
					},
					dialogVisible:false,
					
			};
	
		},
		
		created() {
		  //this.getList();
		},
	
		
		
		methods: {
			closeDialog(){
				this.dialogVisible = false;
			},
			
			// showDialog(systemNo){
			// 	this.query.body.systemNo = systemNo;
			// 	this.getList();
			// 	this.type='add';
				
			// },
			
			showDialog(requireApply){
				// this.systemNo = requireApply.regSysNo;
				this.id = requireApply.id;
				this.pubSysCode=requireApply.applySysNo;
				this.qmsNo = requireApply.qmsNo;
				
				// this.query.body.systemNo = requireApply.regSysNo;
				this.query.body.id = requireApply.id;
				this.query.body.pubSysCode=requireApply.applySysNo;
				this.getList();
				this.type='add';
				
			},
			
			
			showDialog2(row,index) {
				this.type='update';
				this.index = index;
				// this.form = row;
				this.dialogVisible = true;
			
			},
			
			onSubmit() {
				this.getList();
			},
			
			onCommit(){
				this.dialogVisible = false;	
				this.$refs.listTable.selection.forEach((item,index)=>{
					//校验
					getSystemCallCheck({"regCode":item.busCode,"pubSysCode":this.query.body.pubSysCode,"regSysCode":item.systemNo,"id":this.query.body.id,"requireType":'01',"qmsNo":this.qmsNo,"transCode":item.transCode}).then(response => {
						if(response.data.code=='0000'){
							this.$emit("addApplySystemCall",item);
						}else{
							this.$message.error(item.transName+"："+response.data.message);
						}
						
					}).catch(error => {
						console.info("失败");
						console.info(error.message);
					});
				});
			},
			
			handleEdit(index,row){
				/* this.$router.push({name:'serviceDetails',query:{"busCode":row.busCode}}) */
				
				this.dialogVisible = false;
				
				if(this.type=='add'){
					this.$emit("addApplySystemCall",row);
				}else{
					this.$emit("updateApplySystemCall",row,this.index);
				}
				
			},
			
			reset() {
				this.query.body = {};
				// this.query.body.systemNo = this.systemNo;
				this.query.body.id = this.id;
				this.query.body.pubSysCode=this.applySysNo;
			},
			
			getList() {
				getServiceByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					this.dialogVisible = true;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			},
			
			getsystems1(val) {
				if (val != '') {
					this.systemList1 = this.systemListAll.filter(item => {
						return item.systemNo.indexOf(val) != -1 || item.systemName.indexOf(val) != -1;
					})
			
				} else {
					this.systemList1 = this.systemListAll;
				}
			
			},
			

		}
	}
</script>

<style>
</style>
